<template>
  <h2>TableBase</h2>
  <p>基础款的表格。</p>
  <h3>TableBase 属性</h3>
  <table-info type="props" :data="baseProps"></table-info>
  <h3>TableBase Columns</h3>
  <table-info type="props" :data="columnsProps"></table-info>
  <h3>TableBase Slot</h3>
  <table-info type="slot" :data="slotProps"></table-info>
  <h3>案例：分别演示align、labelSlot、valueSlot、formatter、width；isTh</h3>
  <code-demo :code="code">
    <table-base :data="data" :columns="columns1">
      <template #operateLabel>
        操作
        <el-icon color="orange"><Bell /></el-icon>
      </template>
      <template #operateValue="{ row, column, $index }">
        <el-link>查看{{ $index }}</el-link>
      </template>
    </table-base>

    <table-base style="margin-top: 20px" :data="data" :columns="columns2"></table-base>
  </code-demo>

  <h3>案例：树形数据、筛选</h3>
  <p>
    使用本案例时，子表格数据放在row.children中，同element-plus。但不需要配置row-key，本组件已自动生成。
  </p>
  <p>本组件会在row数据附加“__id__”字段，在row.children数据附加“__id__”和“__isChildRow__”字段。</p>
  <code-demo :code="treeCode">
    <table-base :data="treeData" :columns="treeColumns"></table-base>
  </code-demo>

  <h3>案例：分页</h3>
  <code-demo :code="pageHtmlCode" :scriptCode="pageScriptCode">
    <table-base :data="pageData" :columns="pageColumns" pageable :pageSize="5"></table-base>
  </code-demo>
</template>

<script setup>
// prettier-ignore
const baseProps = [
  { name: 'columns', desc: '列配置', type: 'Array<{ label: string, prop: string, width?: string || number, minWidth?: string || number, formatter?: Function(row, column, cellValue), align?: string, isTh?: boolean, labelSlot?: string, valueSlot?: string, filters: Array, filterMethod: Function }>' },
  { name: 'data', desc: '数据内容。同 element-plus 的配置。', type: 'Array<Object>' },
  { name: 'index', desc: '是否有序号列。此列宽度 80px，文字居中。', type: 'boolean' },
  { name: 'border', desc: '是否带有纵向边框。同 element-plus 的配置。', type: 'boolean', default: 'true' },
  { name: 'stripe', desc: '是否为斑马纹 table。同 element-plus 的配置。', type: 'boolean', default: 'true' },
  { name: 'maxHeight', desc: 'Table 的最大高度。 合法的值为数字或者单位为 px 的高度。同 element-plus 的配置。', type: 'number,string' },
  { name: 'spanMethod', desc: '合并行或列的计算方法。同 element-plus 的配置。', type: 'Function({ row, column, rowIndex, columnIndex })' },
  { name: 'pageable', desc: '是否开启分页。', type: 'boolean', default: '' },
  { name: 'pageSize', desc: '开启分页时，每页行数', type: 'number', default: '10' },
  { name: 'pageLayout', desc: '组件布局，子组件名用逗号分隔。同 element-plus 的配置。', type: 'string', default: 'total, prev, pager, next, jumper' },
  { name: 'hideOnSinglePage', desc: '开启分页时，只有一页时是否隐藏分页', type: 'boolean', default: 'true' },
]

// prettier-ignore
const columnsProps = [
  { name: 'label', desc: '列标题', type: 'string' },
  { name: 'prop', desc: '字段名称', type: 'string' },
  { name: 'width', desc: '列宽度', type: 'string,number' },
  { name: 'minWidth', desc: '列最小宽度', type: 'string,number' },
  { name: 'formatter', desc: '用来格式化内容，如果返回空值，则会显示 emptyCellText', type: 'Function(row, column, cellValue)' },
  { name: 'align', desc: '列的对齐方式', type: 'string', enums: 'left / center / right', default: 'center' },
  { name: 'fixed', desc: '列是否固定在左侧或者右侧。 true 表示固定在左侧', type: 'boolean,string', enums: 'true / "left" / "right"', default: 'center' },
  { name: 'isTh', desc: '此列是否为标题', type: 'boolean' },
  { name: 'labelSlot', desc: '列标题的插槽名，scope 同 element-plus，即 { column, $index }', type: 'string' },
  { name: 'valueSlot', desc: '列值的插槽名，scope 同 element-plus，即 { row, column, $index }', type: 'string' },
  { name: 'defaultExpandAll', desc: '是否默认展开所有行，同element-plus。', type: 'boolean', default: 'false' },
  { name: 'expandRowKeys', desc: '可以通过该属性设置 Table 目前的展开行，同element-plus', type: 'boolean', default: 'false' },
  { name: 'filters', desc: '数据过滤的选项数组，数组中的每个元素都需要有 text 和 value 属性。同element-plus', type: 'Array<{text: string, value: string}>', default: '' },
  { name: 'filterPlacement', desc: '与 el-tooltip 的 placement 属性相同。同element-plus', type: 'string' },
  { name: 'filterMethod', desc: '数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。同element-plus', type: 'function(value, row, column)', default: '' },
]

const slotProps = [
  {name: 'empty', desc: '空数据时的插槽'}
]

const code = `<table-base :data="data" :columns="columns1">
  <template #operateLabel>
    操作
    <el-icon color="orange"><Bell /></el-icon>
  </template>
  <template #operateValue="{ row, column, $index }">
    <el-link>查看{{ $index }}</el-link>
  </template>
</table-base>

<table-base
  style="margin-top: 20px"
  :data="data"
  :columns="columns2"
></table-base>

const data = [
  { name: '上海****有限公司', rate: '43.80952%', amount: '4600', time: '2013-11-13' },
  { name: '王**', rate: '43.80952%', amount: '250', time: '2004-01-08' },
  { name: '李**', rate: '43.80952%', amount: '250', time: '2021-09-13' },
]

const columns1 = [
  { label: '股东名称', prop: 'name', align: 'left' },
  { label: '持股比例', prop: 'rate' },
  { label: '认缴出资额', prop: 'amount', formatter: (row) => \`\${row.amount}万人民币\` },
  { label: '公示时间', prop: 'time', width: '120px' },
  { label: '操作', labelSlot: 'operateLabel', valueSlot: 'operateValue' },
]

const columns2 = [
  { label: '股东名称', prop: 'name', isTh: true },
  { label: '持股比例', prop: 'rate' },
  { label: '认缴出资额', prop: 'amount' },
  { label: '公示时间', prop: 'time' },
]`

// prettier-ignore
const data = [
  { name: '上海****有限公司', rate: '43.80952%', amount: '4600', time: '2013-11-13' },
  { name: '王**', rate: '43.80952%', amount: '250', time: '2004-01-08' },
  { name: '李**', rate: '43.80952%', amount: '250', time: '2021-09-13' },
]

// prettier-ignore
const columns1 = [
  { label: '股东名称', prop: 'name', align: 'left' },
  { label: '持股比例', prop: 'rate' },
  { label: '认缴出资额', prop: 'amount', formatter: (row) => `${row.amount}万人民币` },
  { label: '公示时间', prop: 'time', width: '120px' },
  { label: '操作', labelSlot: 'operateLabel', valueSlot: 'operateValue' },
]

// prettier-ignore
const columns2 = [
  { label: '股东名称', prop: 'name', isTh: true },
  { label: '持股比例', prop: 'rate' },
  { label: '认缴出资额', prop: 'amount' },
  { label: '公示时间', prop: 'time' },
]

// prettier-ignore
const treeData = [
  { date: '2016-05-02', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
  { date: '2016-05-04', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
  { date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', children: [
      { date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
      { date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
    ],
  },
  { date: '2016-05-03', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
]

const treeColumns = [
  { label: '股东名称', prop: 'name', align: 'left' },
  {
    label: '入股日期',
    prop: 'date',
    filters: [
      { text: '2016-05-01', value: '2016-05-01' },
      { text: '2016-05-02', value: '2016-05-02' },
    ],
    filterMethod(value, row, column) {
      return row.date === value
    },
  },
  { label: '住址', prop: 'address' },
]

const treeCode = `<table-base :data="treeData" :columns="treeColumns"></table-base>

const treeData = [
  { date: '2016-05-02', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
  { date: '2016-05-04', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
  { date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', children: [
      { date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
      { date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
    ],
  },
  { date: '2016-05-03', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
]

const treeColumns = [
  { label: '股东名称', prop: 'name', align: 'left' },
  {
    label: '入股日期',
    prop: 'date',
    filters: [
      { text: '2016-05-01', value: '2016-05-01' },
      { text: '2016-05-02', value: '2016-05-02' },
    ],
    filterMethod(value, row, column) {
      return row.date === value
    },
  },
  { label: '住址', prop: 'address' },
]`

const pageHtmlCode = `<table-base :data="pageData" :columns="pageColumns" pageable :pageSize="5"></table-base>`
const pageScriptCode = `const pageData = [
  { name: '洪**', age: 12 },
  { name: '王**', age: 24 },
  { name: '李**', age: 23 },
  { name: '洪**', age: 12 },
  { name: '王**', age: 24 },
  { name: '李**', age: 23 },
  { name: '洪**', age: 12 },
  { name: '王**', age: 24 },
  { name: '李**', age: 23 },
  { name: '洪**', age: 12 },
  { name: '王**', age: 24 },
  { name: '李**', age: 23 },
]
const pageColumns = [
  { label: '姓名', prop: 'name' },
  { label: '年龄', prop: 'age', labelSlot: 'ageLabel', valueSlot: 'ageValue' },
]`
const pageData = [
  { name: '洪**', age: 12 },
  { name: '王**', age: 24 },
  { name: '李**', age: 23 },
  { name: '洪**', age: 12 },
  { name: '王**', age: 24 },
  { name: '李**', age: 23 },
  { name: '洪**', age: 12 },
  { name: '王**', age: 24 },
  { name: '李**', age: 23 },
  { name: '洪**', age: 12 },
  { name: '王**', age: 24 },
  { name: '李**', age: 23 },
]
const pageColumns = [
  { label: '姓名', prop: 'name' },
  { label: '年龄', prop: 'age', labelSlot: 'ageLabel', valueSlot: 'ageValue' },
]
</script>
